<template>
	<view>
		<view class="title">
			<view class="bigtitle">寻迹</view>
			<view class="smalltitle">寻找过去与未来的痕迹</view>
		</view>
		<view class="divider">
			<view class="box1"></view>
			<view class="box2">为有效存储您的数据,请微信登录</view>
			<view class="box3"></view>
		</view>

		<view class="login" @click="gotologin">
			<view class="icon">
				<van-icon name="wechat" color='#fff' size='100rpx' />
			</view>
		</view>
		<view class="Agreement" style="display: flex;margin-top: 100rpx;margin-left: 140rpx;">
			<van-radio-group :value='value' @change="onChange">
				<van-radio name="1"> 我已同意并阅读</van-radio>
			</van-radio-group>
			<text style="color: blue;  text-decoration: underline;
			text-decoration-style: solid; " @click="user">用户协议</text>
			<text>和</text>
			<text style="color: blue;  text-decoration: underline;  
			text-decoration-style: solid; " @click="privacy">隐私政策</text>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				value: '0'
			};
		},
		
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			gotologin() {
				if (this.value != '1') {
					uni.showToast({
						title: '请勾选并同意用户协议和隐私政策后登录',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				//显示加载框
				uni.showLoading({
					title: '登录中...'
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						//隐藏加载框
						uni.hideLoading();
						// 调用uni.request发送请求获取用户openid
						uni.request({
							method: 'GET',
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							data: {
								appid: 'wxa90172353cd8f287',
								secret: '12f2899c44eac245a9ef479f8630e5cf',
								js_code: loginRes.code,
								grant_type: 'authorization_code'
							},
							success: res => {
								console.log(res)
								// 获取用户信息
								uni.getUserInfo({
									provider: 'weixin',
									success: async (infoRes) => {
										// 准备参数
										const userinfo = {
											code: loginRes.code,
											rawData: infoRes.rawData,
											openid: res.data.openid
										}
										const {
											data
										} = await uni.$http.post('/api/login',
											userinfo)
										if (data.status == 0) {
											const data1 = {
												nickName: data.data.nickName,
												avatarUrl: data.data.avatarUrl
											}
											this.updateUserInfo(data1)
											this.updateToken(data.token)
											uni.showToast({
												title: '登录成功!',
												duration: 2000,
												icon: 'success'
											})
										} else {
											uni.showToast({
												title: '登录失败!',
												duration: 2000,
												icon: 'error'
											})
										}
									}
								});
							}
						})



					}
				});

			},
			onChange() {
				if (this.value == '0') {
					this.value = '1'
				} else {
					this.value = '0'
				}
			},
			user() {
				uni.navigateTo({
					url: '/subpkg/user/user'
				})
			},
			privacy() {
				uni.navigateTo({
					url: '/subpkg/privacy/privacy'
				})
			}
		},
	}
</script>

<style lang="less">
	.title {
		margin-top: 80rpx;
		margin-left: 50rpx;

		.bigtitle {
			font-size: 80rpx;
		}

		.smalltitle {
			color: #E0E3DA;
		}

	}

	.divider {
		display: flex;
		align-items: center;
		margin-top: 100rpx;

		.box1 {
			flex: 1;
			height: 1px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.box2 {
			flex: 4;
			font-size: 32rpx;
			margin-left: 34rpx;
			color: #C5C6B6;
		}

		.box3 {
			flex: 1;
			height: 1px;
			text-align: center;
			border-top: 1px solid #eee;
		}
	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: rgb(7, 193, 96);
		}
	}
</style>